<script setup lang="ts">
import { ref, onMounted, reactive, computed } from 'vue';
import { useRouter } from "vue-router";
const rouer = useRouter()
const state = reactive({
  list: [
    {
      title: '媒体传播中心', en: 'MEDIA COMMUNICATION CENTER', code: 'classify_1a50d44', desc: ['全媒体深度整合', '矩阵式传播途径'], h: ['全国各级媒体覆盖', '贯穿传媒产业链上中下游'], src: 'https://img.cctvch.cn/uploads/f921a96eb9a78515f83eb16a3867c3a3.png'
    },
    {
      title: '政府合作中心', en: 'GOVERNMENT COOPERATION CENTER', code: 'classify_1ee87ed', desc: ['深度服务', '国家十二大部委'], h: ['财政部 清华 北大', '长期合作伙伴'], src: 'https://img.cctvch.cn/uploads/261b41b71a60606552b8f90ba26c02b1.png'
    },
    {
      title: '绿色低碳传播中心', en: 'GREEN AND LOW-CARBON COMMUNICATION CENTER', code: 'classify_22b0790', desc: ['探索低碳可持续发展的新机遇', '新路径 新产业'], h: ['《中国碳索家》', '成就绿色新商业文明的传播者'], src: 'https://img.cctvch.cn/uploads/5af278bf1d89128a2ccb46e3e11b3d85.png'
    },
    {
      title: '乡村振兴推广中心', en: 'RURAL REVITALIZATION PROMOTION CENTER', code: 'classify_264a3db', desc: ['因地制宜', '助力推动乡村振兴战略'], h: ['产品 模式 运营', '塑造特色形象'], src: 'https://img.cctvch.cn/uploads/c873c258fefeb1d52b2a7f4beb2f1d26.png'
    },
    {
      title: '国际事务中心', en: 'INTERNATIONAL AFFAIRS CENTER', code: 'classify_2973a67', desc: ['全球视野', '本土意识'], h: ['聚焦国际事务', '前沿领域'], src: 'https://img.cctvch.cn/uploads/9f116fdd1dbfc5da27f1e0fac9e2bc10.png'
    },
    {
      title: '品牌文化中心', en: 'BRAND CULTURE CENTER', code: 'classify_2d4c88a', desc: ['品牌设计｜影视制作', '文创产业'], h: ['打造文化价值链', '促进品牌文化产业化发展'], src: 'https://img.cctvch.cn/uploads/d08f707ddf067da649accfa9ced2cea8.png'
    },
    {
      title: '健康中国项目中心', en: 'CHINA HEALTH PROJECT CENTER', code: 'classify_378a6e6', desc: ['联合权威专家', '打造一流的健康平台'], h: ['展现医疗成果', '传播医学价值'], src: 'https://img.cctvch.cn/uploads/fc0fef36e56dcb259c9bcac566125b8f.png'
    },
    {
      title: '会展会务中心', en: 'CONVENT AND EXHIBITION CENTER', code: 'classify_3c6d1de', desc: ['一站式会展服务', '集策划、组织、管理为一体'], h: ['已承办大型会议120余场', '媒体有效传播近千次'], src: 'https://img.cctvch.cn/uploads/e7a1e8200c7c8b048e17b570bc12501c.png'
    },
    {
      title: '数字科技中心', en: 'DIGITAL TECHNOLOGY CENTER', code: 'classify_455caaf', desc: ['CG | VR | 5G | 大数据', '等技术'], h: ['专注多媒体展示研发探索', '提供一体化的创意展示解决方案'], src: 'https://img.cctvch.cn/uploads/48f66ea7d16a8486afeeb3a0b65112d8.png'
    },
    {
      title: '区域发展规划中心', en: 'REGIONAL DEVELOPMENT PLANNING CENTER', code: 'classify_4988ee9', desc: ['参与区域发展', '战略布局'], h: ['促进区域经济发展', '和社会进步'], src: 'https://img.cctvch.cn/uploads/fe4b91a71510891c627e52d799860f5a.png'
    }
  ],
  drag: false,
  progressWidth: 0,
  left: 0,
  wrapperWidth: 0
})


const boxDom = ref()
const progressDom = ref()
const progress = ref(0)
const current = ref(0)
const time = ref(0)

onMounted(() => {
  state.progressWidth = progressDom?.value?.clientWidth || 0
  moveFn()
})
const ballStyle = computed(() => {
  return {
    width: '46px',
    height: '46px',
    // marginTop: '-23px',
    marginLeft: '-23px',
    left: state.left + 'px'
  };
})

const handleMouseDown = (index: number) => {
  current.value = index
  time.value = new Date().getTime()
}
const handleMouseUp = () => {
  let newVal = new Date().getTime()
  if (newVal - time.value <= 150) {
    rouer.push('/project/list?code=' + (state.list[current.value].code))
  }
}

// 拖动项目效果
const moveFn = () => {
  let boxwidth = boxDom.value.offsetWidth
  const unit2 = boxDom.value.children[0].children[0].offsetWidth
  let innerWidth = (unit2 - 109) * state.list.length + 109
  boxDom.value.children[0].style.width = `${innerWidth}px`
  let oDiv = boxDom.value.children[0];  // 获取当前元素
  state.wrapperWidth = innerWidth - boxwidth
  oDiv.onmousedown = (e: any) => {
    // 算出鼠标相对元素的位置
    let disX = e.clientX - oDiv.offsetLeft + 109;
    document.onmousemove = (e) => {
      // 用鼠标的位置减去鼠标相对元素的位置，得到元素的位置
      let left = e.clientX - disX;
      if (left > 0) {
        oDiv.style.left = '0px';
        progress.value = 0
      } else if (Math.abs(left) >= (innerWidth - boxwidth)) {
        oDiv.style.left = -(innerWidth - boxwidth) + 'px';
        progress.value = 100
      } else {
        oDiv.style.left = left + 'px';
        progress.value = (+Math.abs(left / (innerWidth - boxwidth)).toFixed(2)) * 100
      }
      // 联动progerss
      state.left = state.progressWidth * progress.value / 100
    };

    document.onmouseup = (e) => {
      document.onmousemove = null;
      document.onmouseup = null;
    }
  }
}
// 拖动顶部效果
const ballMouseDown = (e: Event) => {
  // console.log('点击鼠标');
  state.drag = true;
  ballMove(e);
}
const ballMouseMove = (e: Event) => {
  if (state.drag) {
    ballMove(e);
  }
}
const ballMouseUp = () => {
  // console.log('鼠标松开');
  state.drag = false;
  // ctx.emit('update', current.value,state.drag)
}
const ballMouseLeave = () => {
  // console.log('鼠标离开组件');
  if (state.drag) {
    ballMouseUp()
  }
}
const ballMove = (e: any) => {
  let distance = 0;
  // @ts-ignore
  if (e.target.className === 'progress-bar' || e.target.className === 'progress-bar drag') {
    distance = e.offsetX
  } else if (e.target.className === 'progress-pointer') {
    distance = e.target.offsetLeft + e.offsetX
  }
  if (distance < 0) {
    distance = 0;
    progress.value = 0
  } else if (distance >= state.progressWidth) {
    distance = state.progressWidth;
    progress.value = 100
  } else {
    progress.value = (+Math.abs(distance / state.progressWidth).toFixed(2)) * 100
  }
  // 通过计算属性的方式改变小球left
  state.left = distance
  // 联动滚动项目
  let oDiv = boxDom.value.children[0];  // 获取当前元素
  oDiv.style.left = -(state.wrapperWidth * progress.value) / 100 + 'px';
}
</script>

<template>
  <div class="project-box">
    <div class="container">
      <div class="progress-bar-wrapper">
        <div class="progress-bar" ref="progressDom" @mousedown="ballMouseDown" @mousemove="ballMouseMove"
          @mouseup="ballMouseUp" @mouseleave="ballMouseLeave">
          <div class="progress-pointer" :style="ballStyle"></div>
          <!-- <div class="progress-pointer" :style="{ left: progress + '%' }"></div> -->
          <div class="progress-point"></div>
        </div>
      </div>
      <div class="project-list-wrapper" ref="boxDom">
        <div class="project-list">
          <div class="project-item" v-for="(item, index) in state.list" :key="index" @mousedown="handleMouseDown(index)"
            @mouseup.left="handleMouseUp">
            <div class="item-inner">
              <div class="info">
                <div class="num text-main font-md">{{ ((index + 1) < 10) ? ('0' + (index + 1)) : (index + 1) }}</div>
                    <div class="title text-main font-m font-bold">{{ item.title }}</div>
                    <div class="en-wrapper">
                      <div class="en text-muted font-sm">{{ item.en }}</div>
                    </div>
                    <div class="content text-body font desc">
                      <p v-for="(child, cindex) in item.desc" :key="cindex">{{ child }}</p>
                    </div>
                    <div class="content text-body font hover">
                      <p v-for="(child, cindex) in item.h" :key="cindex">{{ child }}</p>
                    </div>
                </div>
                <div class="img"><img :src="item.src" :alt="item.title"></div>
              </div>
              <div class="item-dot"></div>
              <div class="item-line"></div>
            </div>
          </div>
        </div>
      </div>
    </div>
</template>

<style lang="scss" scoped>
.project-box {
  position: relative;

  // padding-top: 46px;
  // margin-top: -46px;
  &::after {
    content: '';
    z-index: -1;
    position: absolute;
    top: 269px;
    left: 0;
    width: 100%;
    height: 1px;
    background-color: #c6c6c6;
  }
}

.progress-bar-wrapper {
  z-index: 10;
  position: absolute;
  top: -5px;
  left: 0;
  right: 0;
  width: 1440px;
  height: 46px;
  margin: 0 auto;
}

.progress-point {
  display: none;
  position: absolute;
  top: 50%;
  right: 0;
  width: 10px;
  height: 10px;
  background-image: linear-gradient(to right, #3888FF, #6c71FF, #AA58FA, #FB6D86);
  transform: translate(0, -50%);
  border-radius: 50%;
}

.progress-bar {
  position: relative;
  z-index: 10;
  width: 157px;
  height: 10px;
  margin: -1px auto 0;
  background: #fff url('@/assets/icon/home-line.png') left center no-repeat;
  cursor: col-resize;
  // background: linear-gradient(to right, #3888FF, #6c71FF, #AA58FA, #FB6D86);
  // background-origin: border-box;
  // border-bottom: 1px dashed #fff;
}

.progress-pointer {
  position: absolute;
  top: -18px;
  left: 0;
  width: 46px;
  height: 46px;
  // transform: translate(-23px, -50%);
  background: url('@/assets/icon/home-sj.png') center center no-repeat;
}


.project-list-wrapper {
  cursor: url(https://img.cctvch.cn/uploads/49ffb0951e0f2aaeb85feeaa33f6f3cf.png), auto;
  position: relative;
  height: 480px;
  padding-left: 109px;
  overflow: hidden;
  -webkit-transform: translate3d(0, 0, 0);

  // &::after {
  //   content: '';
  //   z-index: -1;
  //   position: absolute;
  //   top: 269px;
  //   left: 0;
  //   width: 100%;
  //   height: 1px;
  //   background-color: #c6c6c6;
  // }
}

.project-list {
  position: relative;
  padding-top: 60px;
  height: 480px;
  user-select: none;
}

.project-item {
  position: relative;
  width: 288px;
  width: 375px;
  height: 210px;
  float: left;
  cursor: pointer;

  &:nth-child(even) {
    margin-top: 210px;
  }

  // &:not(:first-child) {}
  margin-left: -109px;


  .item-inner {
    position: relative;
    overflow: hidden;
    height: 100%;
    padding: 30px 20px;
    border: 1px solid transparent;
    border-radius: 12px;

    .info {
      z-index: 1;
      position: relative;
      width: 240px;
      margin: 0 auto;
    }
  }

  .item-dot {
    z-index: 10;
    position: absolute;
    left: 50%;
    width: 18px;
    height: 18px;
    background-image: url('@/assets/icon/home-dot.png');
    border-radius: 50%;
    transition: all .3s ease-out 0s;
  }

  .item-line {
    position: absolute;
    left: 50%;
    height: 22px;
    border-left: dashed 1px #626675;
    transition: all .3s ease-out 0s;
  }

  &:hover .item-inner {
    border-color: #c6c6c6;

    &::before {
      content: '';
      position: absolute;
      left: 0;
      right: 0;
      height: 1px;
      background-image: linear-gradient(to right, #3888FF, #6c71FF, #AA58FA, #FB6D86);
    }
  }


  &:nth-child(odd) {
    &:hover .item-inner::before {
      top: 0;
    }

    .item-dot {
      bottom: 0;
      transform: translate(-50%, 50%);
    }

    .item-line {
      bottom: 12px;
    }
  }

  &:nth-child(even) {
    &:hover .item-inner::before {
      bottom: 0;
    }

    .item-dot {
      top: 0;
      transform: translate(-50%, -50%);
    }

    .item-line {
      top: 12px;
    }
  }


  &:hover {
    .item-dot {
      width: 28px;
      height: 28px;
      background-image: url('@/assets/icon/home-dot-h.png');
    }

    .item-line {
      height: 0;
    }

    .info {
      width: auto;
      margin: 0;
      text-align: left;
    }

    .num {
      height: 0;
    }

    .img {
      width: 226px;
    }

    .en {
      height: 16px;
    }

    .hover {
      display: block;
    }

    .desc {
      display: none;
    }
  }

  .info {
    width: 333px;
    text-align: center;
  }

  .img {
    position: absolute;
    bottom: 15px;
    right: 0;
    width: 0;
    height: 94px;

    img {
      width: 100%;
      height: 100%;
      -webkit-user-drag: none;
    }
  }

  .text-main {
    line-height: 30px;
  }

  .en-wrapper {
    padding: 8px 0;
  }

  .en,
  .num {
    overflow: hidden;
    transition: all .3s ease-out 0s;
  }

  .num {
    height: 30px;
  }

  .en {
    height: 0;
  }

  .hover {
    display: none;
  }
}
</style>
